<template>
    <div class="comment">
        <b>发表评论</b>
        <hr>
        <!-- 评论区域 -->
        <textarea placeholder="请输入您要评论的内容(最多吐槽120字)" maxlength="120" cols="30" rows="4" v-model="commentContent"></textarea>
        <mt-button type="primary" size="large" @click="addComment">发表评论</mt-button>
        <div class="comList">
            <div class="comItem" v-for="(item, i) in commentList" :key="item.add_time + i">
                <p class="comTitle">第：{{ i + 1 }}楼 用户：{{ item.user_name }}&nbsp;发表时间：{{ item.add_time | filterTime }}</p>
                <p class="comBody">{{ item.content === 'undefined' ? '这家伙很懒，什么也留下' : item.content }}</p>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="addMore">加载更多</mt-button>
    </div>
</template>

<script>
    // 引入 提示框
    import { Toast } from 'mint-ui'
    export default {
        data() {
            return {
                commentContent: '',
                commentList: [],
                pageIndex: 1
            }
        },
        // 父组件传过来的 id
        props: ['id'],
        created(e) {
            // 调用 获取 评论函数
            this.getComment()
        },
        methods: {
            // 获取 评论
            getComment() {
                this.$http.get(`api/getcomments/${ this.id }?pageindex=${ this.pageIndex }`)
                    .then(function (data) {
                        var data = data.body
                        // 成功提交服务器， 返回状态不为 0
                        if (data.status !== 0) return toastFn('数据获取失败')
                        this.commentList = this.commentList.concat(data.message)
                    })
            },
            // 添加 评论
            addComment() {
                var content = this.commentContent.trim()
                if (!content.length) return toastFn('评论不能为空')
                var contentObj = { user_name: '匿名用户', add_time: Date.now(), content: content }
                this.$http.post(`api/postcomment/${ this.id }`, { content: content } )
                    .then(function (data) {
                        var data = data.body
                        // 失败
                        if (data.status !== 0) return toastFn('系统繁忙 稍后重新提交')
                        this.commentList.unshift(contentObj)
                    })
                // 重置评论
                this.commentContent = ''
            },
            addMore() {
                ++this.pageIndex
                this.getComment()
            }
        }
    }

    // 服务器错误 函数
    function toastFn (msg) {
        Toast({
            message: msg,
            position: 'middle',
            duration: 5000
        })
    }
</script>

<style scoped lang="less">
    // 评论区域
    .comment{
        textarea{
            margin: 0;
        }
        .comList{
            padding: 4px 0;
            .comTitle{
                padding: 0;
                line-height: 20px;
                background-color: #ccc;
            }
            .comBody{
                text-indent: 2em;
            }
        }
    }
</style>